<template>
	<view class="content">
		<!--顶部导航-->
		<view class="content_1" :style="{'height':titleBarHeight + 'px'}">
			<view class="title_1" :style="{'margin-top':top + 'px'}">
				<view class="title_1_icon" @click="back">
					<image class="title_1_icon" src="../../../static/mine/finish/back.png" mode="aspectFit"></image>
				</view>
				<view class="title_1_text">商品搜索</view>
			</view>
		</view>
		<!--占位-->
		<view :style="{height:spaceHeight +'px'}"></view>
		<!--顶部梯形-->
		<view class="content_2">
			<view class="choose_box">
				<!--预定自提选中-->
				<view class="self_left" v-if="selfstate == 'true'">
					<view class="self_left_text">预定自提</view>
				</view>
				<view class="self_right" v-if="selfstate == 'true'" @click="changeTake">
					<view class="self_right_text">外卖到家</view>
				</view>
				<!--外卖到家选中-->
				<view class="home_left" v-if="homestate == 'true'" @click="changeTake">
					<view class="home_left_text">预定自提</view>
				</view>
				<view class="home_right" v-if="homestate == 'true'">
					<view class="home_right_text">外卖到家</view>
				</view>
				<!--选中详细-->
				<view :class="[selfstate == 'true' ? 'choose_self_detail' : '',
							   homestate == 'true' ? 'choose_home_detail' : '']">
				</view>
			</view>
		</view>
		<!--选中内容详细-->
		<view class="content_3">
			<!--搜索框-->
			<view class="search">
				<image class="search_icon" src="../../../static/order/search/search.png"></image>
				<input class="search_input" placeholder="请输入商品名称进行搜索" placeholder-style="color:#8D8D8D font-size:24upx"></input>
			</view>
			<!--热门搜索-->
			<view class="hot">
				热门搜索
			</view>
			<view class="line"></view>
			<!--搜索标签-->
			<view class="search_tip">
				<view class="tips">百事可乐百事可乐</view>
				<view class="tips">百事可乐</view>
				<view class="tips">百事可乐</view>
				<view class="tips">百事百事可乐百事可乐可乐</view>
				<view class="tips">百事可百事可乐乐</view>
				<view class="tips">百事可乐</view>
				<view class="tips">百事可百事可乐乐</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleBarHeight: '',
				spaceHeight: '',
				top: '',
				/*预定自提选中状态*/
				selfstate: 'true',
				/*外卖到家选中状态*/
				homestate: 'false',
			}
		},
		onLoad() {
			//获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.statusBarHeight - uni.upx2px(30)
					this.titleBarHeight = res.statusBarHeight + 22
					this.spaceHeight = res.statusBarHeight + 38
					this.shoptypeHeight = res.windowHeight - uni.upx2px(590)
				},
			})
		},
		methods: {
			//切换预选、外卖选中样式
			changeTake: function() {
				if (this.selfstate == 'true') {
					this.selfstate = 'false'
					this.homestate = 'true'
				} else {
					this.selfstate = 'true'
					this.homestate = 'false'
				}
			},
			//返回
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;
	}

	/*
		顶部导航样式
	*/
	.content_1 {
		width: 750upx;
		background-image: linear-gradient(#E03507, #D92200); //颜色渐变效果(上下)
		text-align: center;
		padding-top: 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		z-index: 9999;
	}

	.title_1 {
		height: 45upx;
		color: #FFFFFF;
		font-size: 32upx;
		position: absolute;
		left: 25upx;
		top: 50upx;
		display: flex;
		align-items: center;
	}

	.title_1_icon {
		width: 20upx;
		height: 35upx;
		margin-right: 25upx;
	}

	.title_1_text {
		height: 45upx;
		font-size: 32upx;
		line-height: 45upx;
		color: #FFFFFF;
	}

	/*
		顶部梯形样式
	*/
	.content_2 {
		height: 110upx;
		background-image: linear-gradient(#D92200, #C61500); //颜色渐变效果(上下)
		padding-top: 20upx;
		z-index: 998;
	}

	.choose_box {
		height: 1000upx;
		margin: 0 25upx;
	}


	/*
		预定自提选中样式
	*/
	.self_left {
		width: 325upx;
		height: 25upx;
		padding: 0upx 0upx 35upx;
		position: absolute;
		color: #DD2800;
		z-index: 1;
	}

	.self_left::before {
		content: "";
		position: absolute;
		top: -73upx;
		left: 0;
		right: 0;
		bottom: 67upx;
		background: #ffffff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 15upx;
		transform: perspective(50upx) rotateX(367deg);
		transform-origin: top left;
	}

	.self_left_text {
		height: 40upx;
		width: 112upx;
		position: absolute;
		top: -50upx;
		left: 95upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #DD2800;
		font-weight: bold;
	}

	.self_right_text {
		height: 40upx;
		width: 112upx;
		position: absolute;
		top: -45upx;
		right: 95upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #595959;
		font-weight: bold;
	}

	.self_right {
		width: 685upx;
		height: 35upx;
		padding: 0upx 0upx 35upx 0upx;
		position: absolute;
		color: #DD2800;
		z-index: 2;
	}

	.self_right::before {
		content: "";
		position: absolute;
		top: -55upx;
		left: 339upx;
		right: 0upx;
		bottom: 60upx;
		background: #FFECED;
		border-bottom-left-radius: 20upx;
		border-top-right-radius: 15upx;
		transform: perspective(50upx) rotateX(355deg);
		transform-origin: top right;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) inset;
	}

	/*
		外卖到家选中样式
	*/
	.home_left {
		width: 387upx;
		height: 25upx;
		padding: 0upx 0upx 35upx;
		position: absolute;
		color: #DD2800;
		z-index: 2;
	}

	.home_left::before {
		content: "";
		position: absolute;
		top: -55upx;
		left: 20upx;
		right: 0upx;
		bottom: 51upx;
		background: #FFECED;
		border-top-left-radius: 20upx;
		border-bottom-right-radius: 15upx;
		transform: perspective(50upx) rotateX(355deg);
		transform-origin: top left;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) inset;
	}

	.home_left_text {
		width: 112upx;
		height: 40upx;
		position: absolute;
		top: -45upx;
		left: 95upx;
		line-height: 40upx;
		font-size: 28upx;
		font-weight: bold;
		color: #595959;
	}

	.home_right_text {
		width: 112upx;
		height: 40upx;
		position: absolute;
		top: -50upx;
		right: 122upx;
		line-height: 40upx;
		font-size: 28upx;
		font-weight: bold;
		color: #DD2800;
	}

	.home_right {
		width: 703upx;
		height: 20upx;
		padding: 0upx 0upx 35upx 0upx;
		position: absolute;
		color: #DD2800;
		z-index: 1;
	}

	.home_right::before {
		content: "";
		position: absolute;
		top: -73upx;
		left: 400upx;
		right: 0upx;
		bottom: 62upx;
		background: #ffffff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 15upx;
		transform: perspective(50upx) rotateX(367deg);
		transform-origin: top right;
	}


	/*
		选中时样式
	*/
	.choose_self_detail {
		height: 40upx;
		background-color: #ffffff;
		margin-top: 70upx;
		border-radius: 0upx 20upx 0upx 0upx;
	}

	.choose_home_detail {
		height: 40upx;
		background-color: #ffffff;
		margin-top: 70upx;
		border-radius: 20upx 0upx 0upx 0upx;
	}

	/*
		选中内容详细样式
	*/
	.content_3 {
		height: 1080upx;
		background-color: #ffffff;
		margin: 0 25upx;
		border-radius: 0upx 0upx 20upx 20upx;
		box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
	}

	/*
		搜索框样式
	*/
	.search {
		height: 65upx;
		margin: 0 20upx;
		background-color: #EEF2F5;
		border-radius: 65upx;
		display: flex;
		align-items: center;
		padding-left: 30upx;
	}

	.search_icon {
		width: 28upx;
		height: 28upx;
		margin-right: 20upx;
	}

	.search_input {
		height: 34upx;
		width: 450upx;
		line-height: 34upx;
		font-size: 24upx;
	}

	/*
		热门搜索样式
	*/
	.hot {
		height: 34upx;
		font-size: 24upx;
		line-height: 34upx;
		color: #848587;
		margin: 0 25upx;
		margin-top: 30upx;
	}

	.line {
		height: 2upx;
		background-color: #F3F3F3;
		margin: 0 30upx;
		margin-top: 20upx;
	}

	/*
		搜索标签样式
	*/
	.search_tip {
		margin: 0 25upx;
		margin-top: 25upx;
		display: flex;
		flex-wrap: wrap; //弹性盒元素换行
	}

	.tips {
		height: 30upx;
		padding: 10upx 20upx;
		background-color: #F8F8F8;
		font-size: 24upx;
		color: #2D2D2D;
		line-height: 30upx;
		border-radius: 5upx;
		margin-right: 20upx;
		margin-bottom: 15upx;
	}
</style>
